<template>
  <el-timeline class="content-box">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :class="activity.type"
    >
      <!-- :color="activity.color"
      :timestamp="activity.timestamp" -->
      <h4>{{ activity.nodeName }}</h4>
      <el-card>
        <h4>操作人&nbsp;:&nbsp;{{ activity.assignee }}</h4>
        <h4>操作时间&nbsp;:&nbsp;{{ activity.createTime }}</h4>
        <div>
          <h4 v-for="(item, idx) in activity.opinion" :key="idx">
            <span class="flex-item">
              {{ item.name }}
              <el-tooltip
                v-if="item.tips"
                class="box-item"
                effect="dark"
                :content="item.tips"
                placement="top-start"
              >
                <i class="el-icon-question" size="24"></i>
              </el-tooltip>
              :&nbsp;</span
            >
            <template v-if="typeof item.content === 'string'">
              <span class="handle">{{ item.content }}</span>
            </template>
            <template v-else>
              <p>
                <el-link
                  class="handle-link"
                  :underline="false"
                  v-for="(obj, ins) in item.content"
                  :key="ins"
                  @click="handlePreview(obj)"
                  >{{ obj.name || obj.fileName }}</el-link
                >
              </p>
            </template>
          </h4>
        </div>
      </el-card>
    </el-timeline-item>
  </el-timeline>
  <el-empty v-if="!activities.length" description="暂无记录"></el-empty>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { postApproveHistory } from "/@/api/acceptance";

import { handlePreview } from "/@/utils/file";
const props = defineProps({
  instanceId: {
    type: Number || String,
    required: true
  },
  nodeDefId: {
    type: String,
    required: true,
    default: "ACT_010"
  }
});

const activities = ref([]);
const getTableData = async () => {
  const { instanceId } = props;
  if (!instanceId) {
    return;
  }
  const params = {
    instanceId
  };
  const { code, data } = await postApproveHistory(params);
  if (code === 200) {
    data.forEach(item => {
      if (item.eflag === 1) {
        item.color = "#FF0000";
      } else {
        item.color = "#409EFF";
      }
      if (item.type === "recall") {
        item.opinion = "撤回";
      }

      if (item.opinion) {
        if (isJSON(item.opinion)) {
          item.opinion = JSON.parse(item.opinion);
        } else {
          if (item.opinion == "流程结束") {
            item.opinion = [{ name: "备注", content: "流程结束" }];
          }
          if (item.nodeId == "ACT_010") {
            // if (item.opinion.indexOf("备注") == -1) {
            //   item.opinion = [{ name: "备注", content: item.opinion }];
            // }
            item.opinion = [{ name: "备注", content: item.opinion }];
          }
        }
        if (item.opinion instanceof Array) {
          item.opinion = item.opinion?.filter(obj => {
            return obj.content?.length;
          });
        }
      }
    });
    activities.value = data;
    console.log(activities.value, "activities.valueactivities.value");
  }
};

const isJSON = str => {
  try {
    if (typeof JSON.parse(str) == "object") {
      return true;
    }
  } catch (e) {}
  return false;
};

getTableData();

watch(
  () => props.instanceId,
  () => {
    getTableData();
  }
);
/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
</script>

<style lang="scss" scoped>
.content-box:deep .el-card {
  padding: 0 16px;
}

.content-box {
  .flex-item {
    flex-shrink: 0;
  }
}

.handle-link {
  margin-right: 12px;
  color: #000;
  font-weight: bold;
  word-break: break-all;
}

:deep .el-timeline-item__tail {
  top: 17px;
}

:deep .el-timeline-item {
  margin-left: 10px;
}

:deep .end .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/done.png) no-repeat center center;
  left: -3px;
}

:deep .submit .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/submit.png) no-repeat center center;
  left: -3px;
}

:deep .reject .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/reject.png) no-repeat center center;
  left: -3px;
}

:deep .todo .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/ready.png) no-repeat center center;
  left: -3px;
}

:deep .transfer .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/ready.png) no-repeat center center;
  left: -3px;
}

:deep .end .el-timeline-item__tail {
  border-left: 2px solid c2cade23;
}

:deep .submit .el-timeline-item__tail {
  border-left: 2px solid rgba(133, 223, 0, 0.2);
}

:deep .reject .el-timeline-item__tail {
  border-left: 2px solid #e45d5d23;
}

:deep .todo .el-timeline-item__tail {
  border-left: 2px solid rgba(82, 152, 255, 0.2);
}

:deep .transfer .el-timeline-item__tail {
  border-left: 2px solid rgba(82, 152, 255, 0.2);
}
</style>
